<template>
  <div class="main_box">
    <el-breadcrumb separator="/" style="margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/manager/order/tackOut' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/manager/sender/allOrder' }"
        >所有订单</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div style="width: 100%; display: flex; justify-content: end">
      <el-button type="primary" @click="getOrderData">刷新</el-button>
    </div>
    <div class="box_item">
      <el-card class="item_item" v-for="(item, index) in OrderOnlineData" :key="index">
        <template #header>
          <div class="card-header">
            <span>接单信息</span>
          </div>
        </template>
        <p>商铺:{{ item.shopName }}</p>
        <p>
          购买人:<span style="font-weight: bolder"> {{ item.username }}</span>
        </p>
        <p>备注：{{ item.demo ? item.demo : "暂无备注" }}</p>
        <p>
          送货地址:<span style="font-weight: bolder">{{
            item.address ? item.address : "未知"
          }}</span>
        </p>

        <el-table :data="item.menuName" height="250px" width="100%" border>
          <el-table-column label="菜品名称" prop="menuName"></el-table-column>
          <el-table-column label="价格" width="80" prop="menuPrice"></el-table-column>
          <el-table-column label="数量" width="40" prop="count"></el-table-column>
          <el-table-column label="图片">
            <template #default="scope">
              <el-image
                :src="scope.row.menuPicture"
                fit="cover"
                style="height: 45px; width: 45px; border-radius: 5px"
              />
            </template>
          </el-table-column>
        </el-table>

        <div class="check">
          <el-button type="primary" @click="GetOrder(item.orderId)">接单</el-button>
        </div>
        <template #footer>下单时间:{{ item.inputTime }}</template>
      </el-card>
    </div>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageItem"
      :page-sizes="[6, 12, 18, 24]"
      background="blue"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import Vue, { ref } from "vue";

const token = localStorage.getItem("student_auth_token");
const page = ref(1);
const pageItem = ref(6);
const pageTotal = ref(0);
const OrderOnlineData = ref([]);
const getOrderData = () => {
  axios
    .get("/api/orderSender/find/list/" + page.value + "/" + pageItem.value, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-28 \n\r😔 res:\n\r", res);
      const msg = res.data.message;
      pageTotal.value = msg.total;
      OrderOnlineData.value = msg.list;
    })
    .catch((err) => {
      console.log("code line-32 \n\r😂 err:\n\r", err);
    });
};
const GetOrder = (id) => {
  axios
    .get("/api/sender/get/order/" + id, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-59 \n\r😃 res:\n\r", res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "接单成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
      getOrderData();
    })
    .catch((err) => {
      // console.log("code line-63 \n\r😂 err:\n\r", err);
      ElMessage({
        type: "error",
        message: "接单失败",
      });
    });
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageItem.value = val;
  getOrderData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.value = val;
  getOrderData();
};
getOrderData();
</script>

<style lang="scss" scoped>
.main_box {
  height: 100%;
  width: 100%;
  .box_item {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    width: 90vw;
    margin: 20px;
    .item_item {
      margin: 20px;
      min-width: 300px;
      max-width: 30vw;
      .check {
        width: 100%;
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>
